<template>
    <div class="dialog">
        <!-- //如果只有自己 则自己展示全屏,remote 展示小窗口
        //如果有对方加入,remote 展示全屏,自己展示小窗口 -->
        <div id="localtracks" :class="isHaveRemoteFlag?'smallLocal':'bigLocal'"></div>
        <div id="remotetracks" :class="isHaveRemoteFlag == true ? 'bigRemote' : 'smallRemote'"></div>
    </div>
</template>

<script lang="ts" setup>
import QNRTC from "qnweb-rtc";
import { Message } from '@arco-design/web-vue';
import { ref } from 'vue';
console.log("current version", QNRTC.VERSION);
const client = QNRTC.createClient();
let isHaveRemoteFlag = ref(false);
async function joinRoom() {
    // 创建QNRTCClient对象
    const roomToken = "OOkdQz2d1kqpAGUTPDQ9GJum1t9BqkGr4DCwMlAX:pALqK5AxbVIHFUH138cz4rP4PdQ=:eyJhcHBJZCI6ImkxN3Fram9zOCIsImV4cGlyZUF0IjoxNzg4MTUwMTU1LCJwZXJtaXNzaW9uIjoiYWRtaW4iLCJyb29tTmFtZSI6Inhpc2h1aW16IiwidXNlcklkIjoieHNtemoifQ==";
    // 这里替换成刚刚生成的 RoomToken
    await client.join(roomToken);
    autoSubscribe(client);
    console.log("joinRoom success!");
    await publish(client);
    console.log(isHaveRemoteFlag);
}
let localTracks:any = null;
async function publish(client:any) {
  // 同时采集麦克风音频和摄像头视频轨道。
  // 这个函数会返回一组audio track 与 video track
  localTracks = await QNRTC.createMicrophoneAndCameraTracks();
  console.log("my local tracks", localTracks);
  // 将刚刚的 Track 列表发布到房间中
  await client.publish(localTracks);
  console.log("publish success!");
  // 在这里添加
  // 获取页面上的一个元素作为播放画面的父元素
  const localElement:any = document.getElementById("localtracks");
  console.log(localTracks)
//   if(localTracks!=null && localTracks.length>0){
//     const localTrack = localTracks[0];
//     // 调用 Track 对象的 play 方法在这个元素下播放视频轨
//     localTrack.play(localElement, {
//           mirror: true
//       });
//   }
  // 遍历本地采集的 Track 对象
  for (const localTrack of localTracks) {
      console.log(localTrack)
      // 如果这是麦克风采集的音频 Track，我们就不播放它。
      if (localTrack.isAudio()) continue;
      // 调用 Track 对象的 play 方法在这个元素下播放视频轨
      localTrack.play(localElement, {
          mirror: true
      });
  }
}
// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象, 同上
function autoSubscribe(client:any) {
    // 添加事件监听，当房间中出现新的 Track 时就会触发，参数是 trackInfo 列表
    client.on("user-published", (userId:any,tracks:any) => {
        console.log("user-published!", userId,tracks);
        subscribe(client, tracks)
        .then(() => console.log("subscribe success!"))
        .catch(e => console.error("subscribe error", e));
    });
    client.on('message-received',function(message:any){
        console.log('message-received',message)
        //ID
        if(message.ID == "leaveRoom"){
            Message.error("对方已挂断");
            leaveRoom();
        }
    })  
    // 就是这样，就像监听 DOM 事件一样通过 on 方法监听相应的事件并给出处理函数即可
}

// 这里的参数 client 是指刚刚初始化的 QNRTCClient 对象
async function subscribe(client:any, tracks:any) {
  // 传入 Track 对象数组调用订阅方法发起订阅，异步返回成功订阅的 Track 对象。
  const remoteTracks = await client.subscribe(tracks);
  // 选择页面上的一个元素作为父元素，播放远端的音视频轨
  const remoteElement = document.getElementById("remotetracks");
  console.log("user-subscribe!", remoteTracks);
  // 遍历返回的远端 Track，调用 play 方法完成在页面上的播放
  for (const remoteTrack of [...remoteTracks.videoTracks, ...remoteTracks.audioTracks]) {
      isHaveRemoteFlag.value  = true; 
      remoteTrack.play(remoteElement);
  }
}

async function leaveRoom() {
    // 创建QNRTCClient对象
    // await client.unsubscribe(tracks);
    const remoteElement:any = document.getElementById("remotetracks");
    // remoteElement?.removeChild;
    remoteElement.innerHTML = '';
    const localElement:any = document.getElementById("localtracks");
    localElement.innerHTML = '';
    isHaveRemoteFlag.value  = false;
    if(localTracks!=null){
        await client.unpublish(localTracks);
        client.leave();
    }
}
// joinRoom();
// 第二部：暴露方法
defineExpose({
	joinRoom,
    leaveRoom 
})

</script>

<style scoped lang="less">
.dialog {
    height: 100%;
    background-color: var(--color-bg-2);
}

.bigLocal{
    width: 600px;
    height: 480px;
}
.smallLocal{
    width:200px;
    height: 200px;
    margin-left: 400px;
}
.smallRemote{
    width: 0.5px;
    height: 0.5px;
}
.bigRemote{
    width: 360px;
    margin-left: 85px;
    display: block;
    position: absolute;
    margin-top: -200px;
    height: 480px;
}


</style>
